<template>
	<view class="withdrawal_box">
		<view style="height: 518upx">
			<nav-bar nav_btn="back" :title="title" :color="color" :auto_img="image"></nav-bar>
			<view class="head_back_box w100">
				<image class="w100 h100" src="https://sz.vvv5g.com/assets/img/bg1.png"></image>
			</view>
			<view class="pos">
				<view class="header_flex_zc flex flexjus">
					<view class="left_zc f500 s24 family">资产总金额(元)</view>
					<view class="tix_box_img flex" @click="goDetails">
						<view class="tix_txt f500 s24 family">提现须知</view>
						<view class="img_box">
							<image class="w100 h100" src="../static/tixian_xuzhi.png"></image>
						</view>
					</view>
				</view>
				<view class="money">
					{{ account.total || 0 }}
				</view>
				<view class="head_bottom_flx flex flexjus">
					<view class="ljjl_box">
						<view class="ljjl_txt f500 s24 family txtali">累积奖励（元）</view>
						<view class="ljjl_bot_txt f500 s28 family">0.00</view>
					</view>
					<view class="ljjl_box">
						<view class="ljjl_txt f500 s24 family txtali">我的排名</view>
						<view class="ljjl_bot_txt f500 s28 family">
							{{ account.rank }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="c_nav_box" style="margin-bottom: 14upx">
			<view class="c_nav_list flex">
				<view class="list_left" v-for="(item, index) in navList" :key="index" @click="nLActive(index)">
					<view :class="[navListIndex == index ? 'list_txt_active' : 'list_txt']">
						{{ item.name }}
					</view>
				</view>
			</view>
		</view>
		<block v-if="navListIndex == 0">
			<view class="bot_list_box" v-for="(item, index) in list" :key="index">
				<view class="list_box_mx">
					<view class="list_head_box flex justify-between">
						<view class="flex">
							<view class="head_portrait">
								<image class="w100 h100" :src="item.shop.avatar" mode="widthFix"></image>
							</view>
							<view class="name_jieshao">
								<view class="name_txt s28 familytow fblod">
									{{ item.shop.shopname }}
								</view>
								<view class="jieshao_txt f500 s22 family">{{ item.order_goods[0].type == 'goods' ? item.order_goods[0].difference : '' }} {{ item.order_goods[0].title }}</view>
							</view>
						</view>
						<view class="mx_list_money f500" style="color: #ff3f4a">+{{ item.money }}</view>
					</view>
					<view class="list_bot_box_mx flex flexjus">
						<view class="list_left_date f500 family s22">
							{{ get_datem(item.created_at) }}
						</view>
						<view class="ddmx_txt f500 family s22" style="color: #ff3f4a">待审核</view>
					</view>
				</view>
			</view>
		</block>
		<block v-if="navListIndex == 1">
			<view class="bot_list_box" v-for="(item, index) in list" :key="index">
				<view class="list_box_mx">
					<view class="list_head_box flex justify-between">
						<view class="flex">
							<view class="head_portrait">
								<image class="w100 h100" :src="item.shop.avatar"></image>
							</view>
							<view class="name_jieshao">
								<view class="name_txt s28 familytow fblod">
									{{ item.shop.shopname }}
								</view>
								<view class="jieshao_txt f500 s22 family">{{ item.order_goods[0].type == 'goods' ? item.order_goods[0].difference : '' }} {{ item.title }}</view>
							</view>
						</view>
						<view class="mx_list_money f500" style="color: #666">+{{ item.money }}</view>
					</view>
					<view class="list_bot_box_mx flex flexjus align-center">
						<view class="list_left_date f500 family s22">
							{{ get_datem(item.created_at) }}
						</view>
						<view class="flex flexjus">
							<view class="ckyy_btn f500 s20 family txtali" @click="showFalseModel(item.reject_reson, item.id)">查看原因</view>
							<view class="tqss_btn f500 s20 family txtali" @click="toRepresentations(item.id)">提起申诉</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<block v-if="navListIndex == 2">
			<view class="bot_list_box" v-for="(item, index) in list" :key="index">
				<view class="list_box_mx">
					<view class="list_head_box flex justify-between">
						<view class="flex">
							<view class="head_portrait">
								<image class="w100 h100" :src="item.shop.avatar"></image>
							</view>
							<view class="name_jieshao">
								<view class="name_txt s28 familytow fblod">
									{{ item.shop.shopname }}
								</view>
								<view class="jieshao_txt f500 s22 family">{{ item.order_goods[0].type == 'goods' ? item.order_goods[0].difference : '' }} {{ item.title }}</view>
							</view>
						</view>
						<view class="mx_list_money f500">+{{ item.money }}</view>
					</view>
					<view class="list_bot_box_mx flex flexjus align-center">
						<view class="list_left_date f500 family s22">
							{{ get_datem(item.created_at) }}
						</view>
						<view class="zxhy_btn txtali f500 s24 family" v-if="!item.is_transfer" @click="toGiftTransfer(item.id)">转赠好友</view>
					</view>
					<!-- <view class="msgTips">{{item.msg}}</view> -->
					<view class="msgTips" v-if="item.is_transfer">来自您的好友{{ item.transfer_user }}的赠予的提现金额</view>
				</view>

				<view class="tixian_btn" @click="go_tixian">申请提现</view>
			</view>
		</block>
		<block v-if="navListIndex == 3">
			<view class="bot_list_box" v-for="(item, index) in list" :key="index">
				<view class="list_box_mx">
					<view class="list_head_box flex justify-between">
						<view class="flex">
							<view class="head_portrait">
								<image class="w100 h100" :src="item.certificate"></image>
							</view>
							<view class="name_jieshao">
								<view class="name_txt s28 familytow fblod">银行卡 {{ item.cardCode }}</view>
								<view class="jieshao_txt f500 s22 family">提现中</view>
							</view>
						</view>
						<view class="mx_list_money f500" style="color: #666">+{{ item.money }}</view>
					</view>
					<view class="list_bot_box_mx flex flexjus">
						<view class="list_left_date f500 family s22">
							{{ get_date(item.created_at) }}
						</view>
						<view class="ddmx_txt f500 family s22" @click="go_rebate(item.id)">订单明细</view>
						<!-- <view class="ddmx_txt_right f500 family s22">
							转账凭证
						</view> -->
					</view>
				</view>
			</view>
		</block>

		<uni-popup ref="reperTexarea" type="bottom" background-color="#fff" borderRadius="32rpx 32rpx 0px 0px">
			<view class="jjpopup">
				<view style="display: flex; align-items: center; justify-content: space-between">
					<view style="width: 100%; font-size: 32rpx; color: #111; text-align: center">填写申诉理由</view>
					<uni-icons type="clear" size="30" color="#E9DDCF" @click="$refs.reperTexarea.close()"></uni-icons>
				</view>
				<view style="display: flex; justify-content: center">
					<view
						class=""
						style="
							flex: 1;
							height: 322rpx;
							margin-top: 52rpx;
							background: transparent;
							border-radius: 20rpx;
							position: relative;
							padding: 24rpx 32rpx;
							border: 2rpx solid #cdcdcd;
							box-sizing: border-box;
						"
					>
						<textarea placeholder="请填写申诉理由" maxlength="300" style="width: 100%; height: 100%" v-model="reperTexarea" name="" id="" @input="changeRepreData"></textarea>
						<view style="font-size: 24rpx; color: #999999; position: absolute; right: 24rpx; bottom: 32rpx">{{ reperTexarea.length }}/300</view>
					</view>
				</view>
				<view class="rejectBtnBlock">
					<button @click="saveReper">提交</button>
				</view>
			</view>
		</uni-popup>
		<!-- 转赠好友搜索好友弹窗 -->
		<uni-popup ref="giftTransferPopup" type="center">
			<view class="giftTransferPopup-box">
				<view class="title">搜索</view>
				<view class="coutent">
					<input type="text" v-model="keyWord" @blur="searchBlur" placeholder="微信昵称/姓名/电话" placeholder-style="font-size: 24upx;color: #666;" />
					<scroll-view class="scroll-popup" scroll-y show-scrollbar>
						<view class="scroll-view-item" v-for="(item, index) in userList" :key="index" @click="saveGiftPopup(item)">
							{{ item.nickname }}{{ item.name ? `（ ${item.name} ）` : `（ ${item.username} ）` }}
						</view>
					</scroll-view>
				</view>
				<view class="save-btn" v-show="userList.length">
					<text @click="closeGiftPopup">取消</text>
					<text @click="saveGiftPopup">确定</text>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="tipsOnePopup" type="center">
			<view class="one-tips-box">
				<view class="title">
					<uni-icons type="info-filled" color="#FF3F4A" size="22" style="transform: rotate(180deg)"></uni-icons>
					<text>提示</text>
				</view>
				<view class="content">
					您确定要将此笔订单提现金额赠予“{{ searchInfo.nickname }}”？
					<text style="color: #ff3f4a">绑定电话为{{ searchInfo.mobile && searchInfo.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}吗？</text>
					转赠一旦确认，将无法撤回。赠予之前请再次确认对方身份信息。
				</view>
				<view class="btn-box">
					<text @click="closeTipsOne">取消转让</text>
					<text @click="saveTipsOne">确定转让</text>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="falseModel" type="center">
			<view class="one-tips-box1">
				<view class="content">{{ errorTxt }}</view>
				<view class="btn-box">
					<text @click="closeTipsOne1">取消</text>
					<text @click="saveTipsOne1">填写原因</text>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="tipsTwoPopup" type="center">
			<view class="one-tips-box">
				<view class="title">
					<uni-icons type="info-filled" color="#FF3F4A" size="22" style="transform: rotate(180deg)"></uni-icons>
					<text>提示</text>
				</view>
				<view class="content">
					您的这笔提现已成功转赠到
					<text style="color: #ff3f4a">“{{ searchInfo.nickname }}”，绑定电话为{{ searchInfo.mobile && searchInfo.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}</text>
					的账户，将由
					<text style="color: #ff3f4a">“{{ searchInfo.nickname }}”</text>
					申请提现，这笔提现将不再显示在您的可提现列表中。
				</view>
				<view class="btn-box-two" @click="saveTipsTwo">
					<text>知道了</text>
				</view>
			</view>
		</uni-popup>
		<view class="bottom_txt txtali" v-if="list.length == 0">暂无数据！</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '我的账户',
			navListIndex: 0,
			image: '../static/left_jian.png',
			color: 'white',
			navList: [
				{
					name: '待审核'
				},
				{
					name: '未通过'
				},
				{
					name: '可提现'
				},
				{
					name: '提现记录'
				}
			],
			reperTexarea: '',
			errorTxt: '',
			account: {},
			list: [],
			keyWord: '',
			userList: [],
			searchInfo: {},
			transferId: 0,
			complaintId: 0
		};
	},
	onLoad() {
		this.getDataList();
		this.getAccount();
	},
	methods: {
		// 搜索
		searchBlur() {
			this.$request({
				url: '/rebate/queryUser',
				method: 'POST',
				data: {
					keyword: this.keyWord
				}
			}).then((res) => {
				this.userList = res.data.data.data;
			});
		},
		// 获取账户信息
		getAccount() {
			this.$request({
				url: 'user/getAccountInfo',
				method: 'POST'
			}).then((res) => {
				this.account = res.data.data;
			});
		},
		// 获取状态列表
		getDataList() {
			let that = this;
			let status = '';
			if (that.navListIndex == 0) {
				status = 'init';
			} else if (that.navListIndex == 1) {
				status = 'fail';
			} else if (that.navListIndex == 2) {
				status = 'issue';
			} else if (that.navListIndex == 3) {
				status = 'finish';
			}
			if (that.navListIndex == 3) {
				this.$request({
					url: 'withdraw/detail'
				}).then((res) => {
					this.list = res.data.data.data;
				});
			} else {
				this.$request({
					url: 'rebate/detail',
					method: 'POST',
					data: {
						status: status
					}
				}).then((res) => {
					this.list = res.data.data;
				});
			}
		},
		go_tixian() {
			uni.navigateTo({
				url: './to_withdrawal'
			});
		},
		go_rebate(id) {
			uni.navigateTo({
				url: '/pages/filePages/memberRebate/memberRebate?id=' + id
			});
		},
		nLActive(ind) {
			this.navListIndex = ind;
			this.list = [];
			this.getDataList();
		},
		goDetails() {
			uni.navigateTo({
				url: './details'
			});
		},
		showFalseModel(errorTxt, id) {
			this.errorTxt = errorTxt;
			this.complaintId = id;
			this.$refs.falseModel.open();
		},
		closeTipsOne1() {
			this.$refs.falseModel.close();
		},
		changeRepreData(e) {
			this.reperTexarea = e.detail.value;
		},
		// 申诉弹窗开始
		toRepresentations(id) {
			this.complaintId = id;
			// 去申述
			this.$refs.reperTexarea.open();
		},
		saveTipsOne1() {
			this.$refs.reperTexarea.open();
			this.$refs.falseModel.close();
		},
		closeReprePopup() {
			this.$refs.reperTexarea.close();
		},
		saveReper() {
			if (!this.reperTexarea) {
				uni.showToast({
					title: '请填写申请理由',
					icon: 'none'
				});
				return false;
			}
			this.$request({
				url: 'rebate/rebate_content',
				method: 'POST',
				data: {
					id: this.complaintId,
					content: this.reperTexarea
				}
			}).then((res) => {
				if (res.data.code == 1) {
					uni.showToast({
						title: '提交成功',
						icon: 'success',
						duration: 2000
					});
				}
			});
			this.$refs.reperTexarea.close();
		},
		// 申诉弹窗结束
		// 搜索弹窗确定事件
		saveGiftPopup(item) {
			console.log(item);
			this.$refs.giftTransferPopup.close();
			this.$refs.tipsOnePopup.open();
			this.searchInfo = item;
		},
		// 搜索弹窗取消事件
		closeGiftPopup() {
			this.$refs.giftTransferPopup.close();
		},
		// 打开搜索弹窗
		toGiftTransfer(id) {
			this.transferId = id;
			this.$refs.giftTransferPopup.open();
		},
		// 一级弹窗确认事件
		saveTipsOne() {
			// 一级弹窗关闭
			this.$refs.tipsOnePopup.close();
			this.$request({
				url: 'rebate/transfer',
				method: 'POST',
				data: {
					id: this.transferId,
					user_id: this.searchInfo.id
				}
			}).then((res) => {
				if (res.data.code == 1) {
					// 二级弹窗打开
					this.$refs.tipsTwoPopup.open();
				} else {
					this.$wanlshop.msg(res.data.msg);
				}
			});
		},
		// 一级弹窗取消事件
		closeTipsOne() {
			this.$refs.tipsOnePopup.close();
		},
		// 二级弹窗关闭事件
		saveTipsTwo() {
			this.$refs.tipsTwoPopup.close();
			this.getDataList();
		}
	}
};
</script>

<style scoped lang="scss">
.withdrawal_box {
	background-color: #f4f5f9;
	padding-bottom: 180upx;
	.bottom_txt {
		margin: 50% auto;
	}
	.representations-box {
		width: 500upx;
		height: 382upx;
		border-radius: 16upx;
		background-color: #fff;

		textarea {
			width: 500upx;
			padding: 30upx;
			box-sizing: border-box;
		}

		.btn-box {
			height: 80upx;
			border-top: 2upx solid #ccc;

			text {
				display: inline-block;
				width: 50%;
				text-align: center;
				line-height: 80upx;
				font-weight: bold;
				box-sizing: border-box;
				color: #333;

				&:first-child {
					border-right: 2upx solid #ccc;
				}

				&:last-child {
					color: #dda867;
				}
			}
		}
	}

	.giftTransferPopup-box {
		width: 548upx;
		border-radius: 16upx;
		background-color: #fff;

		> view {
			box-sizing: border-box;
		}

		.title {
			font-weight: bold;
			font-size: 30upx;
			width: 100%;
			padding: 48rpx 0 10rpx;
			text-align: center;
		}

		.coutent {
			width: 100%;
			padding: 30upx 32rpx;
			padding-top: 24upx;

			input {
				font-size: 26upx;
				width: 100%;
				height: 68upx;
				margin-bottom: 24rpx;
				border-radius: 10upx;
				line-height: 68upx;
				background-color: rgb(242, 242, 242);
				text-align: center;
			}

			.scroll-popup {
				//动态添加200
				height: 240upx;
				margin-bottom: 24rpx;
				&::-webkit-scrollbar {
					display: block !important;
					width: 8rpx !important;
					height: 12rpx !important;
					background-color: #ebbe87;
				}

				.scroll-view-item {
					height: 70upx;
					width: 100%;
					background-color: #fff;
					line-height: 70upx;
					padding-left: 20upx;
					box-sizing: border-box;
					border-bottom: 2upx solid #f4f5f9;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 26rpx;
					color: #666;
				}
			}
		}

		.save-btn {
			height: 92upx;
			border-top: 2upx solid #ccc;

			text {
				display: inline-block;
				width: 50%;
				text-align: center;
				line-height: 92upx;
				box-sizing: border-box;
				font-size: 28rpx;
				color: #666;

				&:first-child {
					border-right: 2upx solid #ccc;
				}

				&:last-child {
					color: #dda867;
				}
			}
		}
	}
	.one-tips-box1 {
		width: 560upx;
		height: auto;
		border-radius: 16upx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		.content {
			width: 100%;
			box-sizing: border-box;
			padding: 60upx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #000000;
			line-height: 40rpx;
			text-align: center;
		}
		.btn-box {
			width: 100%;
			height: 80upx;
			border-top: 2upx solid #ccc;
			text {
				display: inline-block;
				width: 50%;
				text-align: center;
				line-height: 80upx;
				box-sizing: border-box;
				font-size: 28rpx;
				color: #333;
				&:first-child {
					border-right: 2upx solid #ccc;
				}
				&:last-child {
					color: #dda867;
				}
			}
		}
	}
	.one-tips-box {
		width: 600upx;
		padding: 32rpx;
		border-radius: 16upx;
		background-color: #fff;
		box-sizing: border-box;
		.title {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			padding: 16rpx 0;
			text {
				font-weight: bold;
				font-size: 36upx;
				color: #ff3f4a;
			}
		}

		.content {
			width: 100%;
			box-sizing: border-box;
			padding-top: 12rpx;
			line-height: 40rpx;
			font-size: 28upx;
			text-indent: 2em;
			color: #666;
			word-break: break-all;
			word-wrap: break-word;
		}

		.btn-box {
			display: flex;
			justify-content: space-between;
			padding-top: 40rpx;

			text {
				display: inline-block;
				width: 260rpx;
				text-align: center;
				line-height: 88upx;
				border-radius: 16rpx;
				font-size: 28rpx;

				&:first-child {
					color: #333;
					background-color: #f3f3f3;
				}

				&:last-child {
					color: #fff;
					background-color: #dda867;
				}
			}
		}

		.btn-box-two {
			width: 100%;
			text-align: center;
			background-color: #dda867;
			color: #fff;
			height: 80upx;
			line-height: 80upx;
			margin-top: 40rpx;
			border-radius: 16upx;
			font-size: 28rpx;
		}
	}

	.head_back_box {
		position: absolute;
		top: 0;
		height: 518upx;
	}

	.pos {
		position: relative;

		.header_flex_zc {
			padding-left: 32upx;
			padding-right: 32upx;

			.left_zc {
				color: #ffffff;
			}

			.tix_box_img {
				margin-left: 400upx;

				.tix_txt {
					color: #a3600f;
				}

				.img_box {
					width: 24upx;
					height: 24upx;
					line-height: 32upx;
					margin-left: 6upx;
				}
			}
		}

		.money {
			line-height: 130rpx;
			font-size: 92rpx;
			font-family: DIN-Medium, DIN;
			font-weight: 500;
			color: #fff;
			margin-top: 16upx;
			text-align: center;
		}

		.head_bottom_flx {
			padding-top: 22rpx;
			padding-left: 122upx;
			padding-right: 122upx;
			.ljjl_box {
				.ljjl_txt {
					height: 34rpx;
					line-height: 30rpx;
					color: #fff;
				}
				.ljjl_bot_txt {
					line-height: 40rpx;
					padding-top: 10rpx;
					color: #844902;
					text-align: center;
				}
			}
		}
	}

	.c_nav_box {
		width: 100%;
		height: 88upx;
		background-color: #ffffff;
		padding-left: 48upx;
		padding-right: 48upx;
		padding-bottom: 6upx;
		overflow: hidden;
		box-sizing: border-box;
		.c_nav_list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100%;
			.list_left {
				.list_txt {
					color: #666666;
					font-size: 24upx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #666666;
				}

				.list_txt_active {
					position: relative;
					z-index: 1;
					font-size: 28upx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333;
					&::after {
						position: absolute;
						left: 50%;
						bottom: -24rpx;
						content: '';
						width: 38upx;
						height: 4upx;
						background: #333;
						transform: translate(-50%, 0);
						z-index: 2;
					}
				}
			}

			.list_left:first-child {
				margin-left: 0;
			}
		}
	}

	.bot_list_box {
		border-bottom: 1px solid #f4f5f9;
		.tixian_btn {
			position: fixed;
			width: 686upx;
			text-align: center;
			height: 100upx;
			line-height: 100upx;
			background: #ebbe87;
			border-radius: 50upx;
			font-size: 32rpx;
			font-weight: bold;
			color: #fff;
			bottom: 60upx;
			left: 32upx;
		}

		.list_box_mx {
			width: 100%;
			background: #ffffff;
			padding: 26upx 32upx;
			box-sizing: border-box;
			.list_head_box {
				display: flex;
				align-items: center;
				.head_portrait {
					width: 80upx;
					height: 80upx;
					background-color: #666;
					border-radius: 50%;
					overflow: hidden;
				}

				.name_jieshao {
					margin-left: 20upx;

					.name_txt {
						color: #666;
					}

					.jieshao_txt {
						width: 364upx;
						color: #999;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-top: 14upx;
					}
				}

				.mx_list_money {
					font-size: 44upx;
					color: #ff3f4a;
					margin-left: 48upx;
				}
			}

			.list_bot_box_mx {
				margin-top: 30upx;

				.list_left_date {
					color: #666666;
				}

				.zxhy_btn {
					width: 150upx;
					height: 50upx;
					border-radius: 25upx 25upx 25upx 25upx;
					border: 2upx solid #ff3f4a;
					line-height: 50upx;
					color: #ff3f4a;
				}

				.ddmx_txt {
					color: #dda867;
				}

				.ddmx_txt_right {
					color: #dda867;
					margin-top: 8upx;
					margin-left: 24upx;
				}

				.ckyy_btn {
					width: 150upx;
					height: 50upx;
					border-radius: 25upx 25upx 25upx 25upx;
					border: 2upx solid #666666;
					line-height: 50upx;
					color: #666;
				}

				.tqss_btn {
					width: 150upx;
					height: 50upx;
					margin-left: 20upx;
					border-radius: 25upx 25upx 25upx 25upx;
					border: 2upx solid #dda867;
					line-height: 50upx;
					color: #dda867;
				}
			}

			.msgTips {
				width: 100%;
				padding: 12rpx 20rpx;
				margin-top: 20rpx;
				background: #f4f5f9;
				font-size: 24rpx;
				color: #999;
				line-height: 34rpx;
				box-sizing: border-box;
				border-radius: 10rpx;
			}
		}
	}
}
.rejectBtnBlock {
	width: 100%;
	display: flex;
	justify-content: center;
	padding-top: 84rpx;
	button {
		font-size: 28rpx;
		background: #ebbe87;
		width: 100%;
		height: 86rpx;
		border-radius: 43px;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
.jjpopup {
	padding: 32rpx;
	background: linear-gradient(to bottom, #ebbe8761, #fff), #fff;
	border-radius: 32rpx 32rpx 0px 0px;
}
</style>
<style>
page {
	background: #f4f5f9;
}
</style>
